<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">


<f:view contentType="text/html" locale="en">
        <h:head/>
        <h:outputStylesheet library="css" name="main.css"/>
        <h:body>
        <f:metadata>
			<f:event listener="#{registrationBean.initUser()}" type="preRenderView"/>
		</f:metadata>
                <p:panel id="registration" header="Registration" styleClass="register-panel">
                        <h:form method="POST">
                        <!-- 
                        <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
                         -->
                                <p:panelGrid id="matchGrid" columns="3" styleClass="ui-panelgrid">
                                        
                                        <h:outputText value="User name:*"/>
                                        <p:inputText id="username" required="true" value="#{registrationBean.user.username}" label="Username">
                                                <f:validator binding="#{userNameValidator}"/>
                                        </p:inputText>
                                        <p:message for="username"/>
                                        
                                        <h:outputText value="Password:*"/>
                                        <p:password id="pwd1" match="pwd2" label="Password" required="true" value="#{registrationBean.user.password}" validatorMessage="6-20 Charactesrs + digit">
                                                <f:validateRegex pattern="((?=.*\d)(?=.*[a-z]).{6,20})"/>
                                        </p:password>
                                        <p:message for="pwd1"/>
                                        
                                        <h:outputText value="Confirm password:*"/>
                                        <p:password id="pwd2"  label="Confirmed password" required="true"/>
                                        <p:message for="pwd2"/>
                                        
                                        <h:outputText value="Full name:*"/>
                                        <p:inputText id="fullName" required="true" value="#{registrationBean.user.fullName}" label="FullName"/>
                                        <p:message for="fullName"/>
                                        
                                        <h:outputText value="Email:*"/>
                                        <p:inputText id="email" required="true" value="#{registrationBean.user.email}"  label="Email">
                                                <f:validator binding="#{emailValidator}"/>
                                        </p:inputText>
                                        <p:message for="email"/>
                
                                        <h:outputText value="Notes:"/>
                                        <p:inputTextarea id="notes" required="false" value="#{registrationBean.user.notes}"/>                
                                </p:panelGrid>
        						
                                <p:commandButton  value="Save" ajax="false" validateClient="true" action="#{registrationBean.save()}"/>
                        </h:form>
                </p:panel>
                
        </h:body>


</f:view>
</html>